* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --milk-white: #edeeed;
    --white: #ffffff;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--milk-white);
}

.drops {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop {
    position: absolute;
    width: 150px;
    height: 150px;
    background: transparent;
    /*<percentage> – 使用百分比值表示圆半径或椭圆的长半轴和短半轴的大小。
    横轴的百分比是指盒子的宽度； 纵轴的百分比是指盒子的高度。 负值无效。*/
    border-radius: 57% 43% 37% 63% / 45% 52% 48% 55%;
    /*inset关键字的存在将阴影更改为框架内的阴影（就像内容被压在框内一样）。
    插入阴影绘制在边框内（甚至是透明的），在背景之上，但在内容之下。*/
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05),
    15px 25px 10px rgba(0, 0, 0, 0.1),
    15px 20px 20px rgba(0, 0, 0, 0.05),
    inset -10px -10px 15px rgba(255, 255, 255, 0.9);
}

.drop::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 35px;
    background: var(--white);
    width: 20px;
    height: 20px;
    border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%;
}

.drop::after {
    content: '';
    position: absolute;
    top: 25px;
    left: 65px;
    background: var(--white);
    width: 10px;
    height: 10px;
    border-radius: 59% 43% 37% 63% / 48% 37% 63% 52%;
}

.drop:nth-child(2) {
    /*scale() CSS 函数 定义了一种在 2D 平面上调整元素大小的变换。
    因为缩放量是由一个向量定义的，所以它可以在不同的比例下调整水平和垂直维度的大小。*/
    transform: scale(0.5) translate(-200px, 170px);
    border-radius: 64% 36% 42% 58% /42% 37% 63% 58%;
}

.drop:nth-child(3) {
    transform: scale(0.5) translate(300px, 190px);
    /* 上左 上右 下左 下右 / 左上 右上 右下 左下 */
    border-radius: 42% 58% 63% 37% /67% 54% 46% 33%;
}

.drop:nth-child(4) {
    transform: scale(0.5) translate(300px, -190px);
    border-radius: 58% 42% 43% 57% /57% 24% 76% 43%;
}

